<template>
    <div style="width: 90%; margin: auto; margin-top: 10px;">
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="box top">
                    <el-row>
                        <el-col :span="12">
                            <h1>{{ this.car.carName }}</h1>
                            <img :src="this.car.carCover" />
                        </el-col>
                        <el-col :span="12" style="margin-top: 20px; text-align: left;">
                            <div class="item">厂商指导价格：{{ this.car.carPriceL }} ~ {{ this.car.carPriceH }} 万</div>
                            <div class="item">品牌：{{ brandName }}</div>
                            <div class="item">级别：{{ carClassName }}</div>
                            <div class="item" style="display: flex;">评分：<el-rate v-model="this.car.carScore" disabled show-score
                                    text-color="#ff9900" score-template="{value}">
                                </el-rate></div>
                            <div class="item">其他参数：{{ this.car.carIntro }}</div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="box top">
                    <div>
                        <h1>相关文章</h1>
                        <div v-for="article in articleList" @click="ArticleUrl(article.id)" class="arti_box">
                            <h2 style="text-align: left; margin-top: 2px; margin-left: 2px;">{{ article.title }}</h2>
                            <div style="text-align: right; margin-right: 10px;">点击次数:{{ article.hot }}次</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="box">
                    <h3 class="title">型号</h3>
                    <el-table :data="modelList" stripe style="width: 100%">
                        <el-table-column prop="modelName" label="名称" width="180">
                        </el-table-column>
                        <el-table-column prop="modelPrice" label="价格" width="180">
                        </el-table-column>
                        <el-table-column prop="marketTime" label="上市时间">
                        </el-table-column>
                        <el-table-column prop="maxTorque" label="最大扭矩">
                        </el-table-column>
                        <el-table-column prop="wheelBase" label="轴距">
                        </el-table-column>
                        <el-table-column prop="capacity" label="油箱/电池容量">
                        </el-table-column>
                        <el-table-column prop="engineModel" label="引擎型号">
                        </el-table-column>
                        <el-table-column prop="displacement" label="排量">
                        </el-table-column>
                        <el-table-column prop="maxHorsepower" label="上市时间">
                        </el-table-column>
                        <el-table-column prop="marketTime" label="最大马力">
                        </el-table-column>
                        <el-table-column prop="driveMode" label="驱动方式">
                        </el-table-column>
                        <el-table-column prop="maxSpeed" label="最高车速">
                        </el-table-column>

                    </el-table>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <div class="box">
                    <h3 class="title">照片</h3>
                    <el-image style="width: 500px; height: 500px; margin: 10px; border-color: black;"
                        v-for="url in imgs" :key="url['picUrl']" :src="url['picUrl']">
                    </el-image>

                </div>
            </el-col>
        </el-row>


    </div>
</template>

<script>
import router from '../../router';

export default {
    data() {
        return {
            carId: 0,
            car: {},
            imgs: [],
            modelList: [],
            articleList: [],
            brandName:'',
            carClassName:''
        }
    },
    methods: {
        LodeCar() {
            this.$axios.get("/car/id", { params: { carId: this.carId } }).then(res => {
                if (res) {
                    this.car = res.data.data;
                    this.LoadInformation();
                    debugger
                }
                else {
                    this.$message.error("加载失败");
                }
            });
        },
        LodeArti() {
            this.$axios.get("/article/car/id", { params: { carId: this.carId } }).then(res => {
                if (res) {
                    this.articleList = res.data.data;
                }
                else {
                    this.$message.error("加载失败");
                }
            });
        },
        LodeImgs() {
            this.$axios.get("/pic/id", { params: { carId: this.carId } }).then(res => {
                if (res) {
                    //debugger
                    this.imgs = res.data.data;

                    //console.log(this.img_urls)
                }
                else {
                    this.$message.error("加载失败");
                }
            });
        },
        LodeModels() {
            this.$axios.get("/model/id", { params: { carId: this.carId } }).then(res => {
                if (res) {
                    //debugger
                    this.modelList = res.data.data;
                }
                else {
                    this.$message.error("加载失败");
                }
            });
        },
        ArticleUrl(articleId) {
            debugger
            const ARTICLE_URL = "http://localhost:8080/arti/detail/" + articleId;
            //return ARTICLE_URL;
            window.open(ARTICLE_URL, "_blank")
            //this.$router.push(this.ARTICLE_URL);

        },
        LoadInformation(){
            debugger
            this.$axios.get("/brand/id", { params: { id: this.car.brandId } }).then(res => {
                if (res) {
                    this.brandName = res.data.data['brandName'];
                }
                else {
                    this.$message.error("加载失败");
                }
            });
            switch(this.car.carClass){
                case 0: this.carClassName = '轿车'; break;
                case 1: this.carClassName = 'SUV'; break;
                case 2: this.carClassName = 'MPV'; break;
                case 3: this.carClassName = '跑车'; break;
                case 4: this.carClassName = '微卡'; break;
                case 5: this.carClassName = '轻客'; break;
                default: this.carClassName = '其他'; 
            }
        }

    },
    computed: {
    },
    created() {
        this.carId = this.$route.params.id;
        this.LodeCar();
        this.LodeArti();
        this.LodeModels();
        this.LodeImgs();
    }
}
</script>

<style>
.top {
    height: 300px;
}

.box {
    border: 2px solid rgb(249, 245, 245);
    border-radius: 5px;
    text-align: center;
    margin-top: 10px;
    box-shadow: 4px 4px 15px rgb(191, 189, 189);
}

.item {
    font-size: 20px;
    margin-top: 10px;
}

.title {
    font-size: 20px;
    text-align: left;
    margin-left: 10px;
}
.arti_box{
    border: 2px solid rgb(249, 245, 245);
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgb(191, 189, 189);
}
</style>